<template>
  <div>
    <el-header style="text-align: right; font-size: 15px; height: 80px; width:100%">
      <el-dropdown>
        <el-dropdown-menu></el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <el-col :span="13" style="width: 200px;">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo">
        <!-- 管理员权限查看 -->
          <div v-show="this.$store.state.userDTO.state == 0">
            <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>管理模块</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1" @click="goUserMenu">用户管理</el-menu-item>
            <el-menu-item index="1-2" @click="goCarMenu">车辆管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="2">
          <i class="el-icon-setting"></i>
          <span slot="title" @click="goStatistics">统计报表</span>
        </el-menu-item>
          </div>
        <!-- 用户权限查看 -->
          <div v-show="this.$store.state.userDTO.state == 1">
            <el-menu-item index="3">
          <i class="el-icon-menu"></i>
          <span slot="title" @click="goStop">预约停车</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-document"></i>
          <span slot="title" @click="goPay">费用结算</span>
        </el-menu-item>
        <el-menu-item index="5">
          <i class="el-icon-edit-outline"></i>
          <span slot="title" @click="goUpdateInfo">注册车辆</span>
        </el-menu-item>
        <el-menu-item index="6">
          <i class="el-icon-user"></i>
          <span slot="title" @click="goUserInfo">个人主页</span>
        </el-menu-item>
          </div>
      </el-menu>
    </el-col>
  </div>
</template>

<script>
export default {
  name: "HeaderIndex",
  methods: {
    goUserMenu(){
      this.$router.push({
        path:'/userMenu',
      })
    },
    goCarMenu(){
      this.$router.push({
        path:'/carMenu'
      })
    },
    goStop(){
      this.$router.push({
        path:'/stop'
      })
    },
    goPay(){
      this.$router.push({
        path:'/pay'
      })
    },
    goStatistics(){
      this.$router.push({
        path:'/statistics'
      })
    },
    goUpdateInfo(){
      this.$router.push({
        path:'/update'
      })
    },
    goUserInfo(){
      this.$router.push({
        path:'/userInfo'
      })
    }
  },
};
</script>

<style>
.el-header {
  background-color: #409eff;
  border-color: #409eff;
  border-radius: 3px;
  line-height: 60px;
  margin-bottom: 10px;
}
</style>